<template>
	<view class="content">
		<u-toast ref="uToast" />
		<view class="container">
			<view class="card-wrapper">
				<view class="card-item" v-for="(item, index) in cardArrs" :key="index" :style="[
		          { zIndex: item.zIndex },
		          { transform: `scale(${item.scale}) translate3d(0px, ${item.translateY}, 0px)` },
		          { transition: `transform ${item.transitionTime}s ease 0s` }
		        ]">
					<view class="item-inner" :style="{ backgroundColor: item.bgColor }">
						<view class="register_form" v-if="!cardTab && !forgotpwFlag">
							<view class="register_title">注册</view>
							<u--form labelPosition="left" :model="model1" ref="form1">
								<u-form-item prop="userInfo.name" ref="item1" class="formItem_flex">
									<u--image :showLoading="true" src="/static/imgs/img2.png" width="40rpx"
										height="40rpx" style="margin-right: 14rpx;"></u--image>
									<u--input v-model="model1.userInfo.account" border="none" placeholder="请输入账号"
										placeholderStyle="color: #B3E0FF" maxlength="50"></u--input>
								</u-form-item>
								<u-form-item prop="userInfo.name" ref="item1" class="formItem_flex">
									<u--image :showLoading="true" src="/static/imgs/img3.png" width="40rpx"
										height="40rpx" style="margin-right: 14rpx;"></u--image>
									<u--input v-model="model1.userInfo.password" border="none" placeholder="请输入密码"
										placeholderStyle="color: #B3E0FF" password maxlength="50"></u--input>
								</u-form-item>
								<u-form-item prop="userInfo.name" ref="item1" class="formItem_flex">
									<u--image :showLoading="true" src="/static/imgs/img3.png" width="40rpx"
										height="40rpx" style="margin-right: 14rpx;"></u--image>
									<u--input v-model="model1.userInfo.passwordagain" border="none" placeholder="请再次输入密码"
										placeholderStyle="color: #B3E0FF" password maxlength="50"></u--input>
								</u-form-item>
								<u-form-item prop="userInfo.name" ref="item1" class="formItem_flex">
									<u--image :showLoading="true" src="/static/imgs/img1.png" width="40rpx"
										height="40rpx" style="margin-right: 14rpx;"></u--image>
									<u--input v-model="model1.userInfo.email" border="none" placeholder="请输入邮箱号"
										placeholderStyle="color: #B3E0FF" maxlength="50"></u--input>
								</u-form-item>
							</u--form>
							<view class="register_hint"><text class="xing">*</text>邮箱用于忘记密码使用。</view>
							<view class="register_button" v-if="index == 0" @tap="register">注册</view>
							<view class="register_button1" v-if="index == 1" @click="cardArrsClick(index)">登录</view>
						</view>
						<view class="register_form1" v-if="cardTab && !forgotpwFlag">
							<view class="register_title">登录</view>
							<u--form labelPosition="left" :model="model2" ref="form1">
								<u-form-item prop="userInfo.name" ref="item1" class="formItem_flex">
									<u--image :showLoading="true" src="/static/imgs/img2.png" width="40rpx"
										height="40rpx" style="margin-right: 14rpx;"></u--image>
									<u--input v-model="model2.userInfo.account" border="none" placeholder="请输入账号"
										placeholderStyle="color: #B3E0FF" maxlength="50"></u--input>
								</u-form-item>
								<u-form-item prop="userInfo.name" ref="item1" class="formItem_flex">
									<u--image :showLoading="true" src="/static/imgs/img3.png" width="40rpx"
										height="40rpx" style="margin-right: 14rpx;"></u--image>
									<u--input v-model="model2.userInfo.password" border="none" placeholder="请输入密码"
										placeholderStyle="color: #B3E0FF" maxlength="50" password></u--input>
								</u-form-item>
							</u--form>
							<view class="register_button" v-if="index == 0" style="margin-top: 39rpx;" @tap="login">登录
							</view>
							<view class="register_hint" style="text-align: right;margin-right: 51rpx;"
								@click="forgotPassword">忘记密码？</view>
							<view class="register_button1" v-if="index == 1" @click="cardArrsClick(index)">注册</view>
						</view>
						<view class="register_form1" v-if="forgotpwFlag">
							<view class="register_title">找回密码</view>
							<view style="margin: 0 52rpx;text-align: left;font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #4D4D4D;">
								忘记密码提示：<br>
								若忘记登录密码，请将您提交订单的预约证件号码和注册时的
								邮箱发送到客服邮箱<text
									style="color: #1890FF;">sunhappy0318@163.com</text>,我们管理员后台核实身份信息后，会建新的登录密码通过邮件方式发送给您。
							</view>

							<view class="register_button2" v-if="index == 0" style="margin-top: 39rpx;"></view>
							<view class="register_hint" style="text-align: right;margin-right: 51rpx;"></view>
							<view class="register_button1" v-if="index == 1" @click="cardArrsClick1(index)">登录</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getUserInfo,
		userLogin,
		newregister
	} from "@/api/user.js"
	export default {
		data() {
			return {
				forgotpwFlag: false,
				cardArrs: [{
						text: "card-1",
						zIndex: 10,
						bgColor: "#FFFFFF",
						scale: 1,
						translateY: 0,
						transitionTime: 1
					},
					{
						text: "card-2",
						zIndex: 9,
						bgColor: "#FFFFFF",
						scale: 0.9,
						translateY: '15vh',
						transitionTime: 1
					},
				],
				isClick: true,
				startY: 0, // 触摸位置
				endY: 0, // 结束位置
				moveY: 0, // 滑动时的位置
				disY: 0, // 移动距离
				slideDistance: 40, // 滑动触发切换还是回位的阀值
				currentIndex: 0, // 当前第一个的 index
				slideDirection: 0, // 滑动方向：0 向下，1 向上
				slideFilishDistance: 300, // 滑动切换动画完成的距离
				showSex: false,
				model1: {
					userInfo: {
						// account: '测试',
						// password: 'qwe123',
						// passwordagain: 'qwe123',
						account: '',
						password: '',
						passwordagain: '',
						email: '',
					},
				},
				model2: {
					userInfo: {
						account: '',
						password: ''
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				cardTab: true
			}
		},
		onLoad() {
			uni.removeStorageSync('__token__');
			uni.removeStorageSync('userInfoList');
			uni.removeStorageSync('businessid');
			let that = this;
			let businessid = that.getUrlKey('businessid');
			console.log(businessid, 'businessid');
			if (businessid) {
				that.cardTab = false;
				uni.setStorageSync('businessid', JSON.stringify(businessid));
			} else {
				that.cardTab = true;
			}
		},
		methods: {
			getUrlKey(name) {
				return (
					decodeURIComponent(
						(new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
							location.href
						) || [, ""])[1].replace(/\+/g, "%20")
					) || null
				);
			},
			login() {
				let that = this;
				if (that.model2.userInfo.account == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'none',
					});
					return false;
				} else if (that.model2.userInfo.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
					});
					return false;
				}
				let data = {
					...that.model2.userInfo
				}
				userLogin(data).then(res => {
					if (res.code == "success" && res.msg == "登录成功") {
						uni.setStorageSync('__token__', '2f8672f4e545c3212489e0cbad6447df')
						uni.setStorageSync('userInfoList', JSON.stringify(res.data));
						uni.navigateTo({
							url: '/pages/order/orderList'
						});
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						});
					}
					console.log(res, 'userLogin')
				})
				
			},
			register() {
				let that = this;
				if (that.model1.userInfo.account == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'none',
					});
					return false;
				} else if (that.model1.userInfo.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
					});
					return false;
				} else if (that.model1.userInfo.passwordagain == '') {
					uni.showToast({
						title: '请再次输入密码',
						icon: 'none',
					});
					return false;
				} else if (that.model1.userInfo.email == '') {
					uni.showToast({
						title: '请输入邮箱号',
						icon: 'none',
					});
					return false;
				}
				let businessid = ''
				if (uni.getStorageSync('businessid')) {
					businessid = JSON.parse(uni.getStorageSync('businessid'));
				} else {
					businessid = ''
				}
				let data = {
					businessid: businessid,
					...that.model1.userInfo
				}
				// 注册
				newregister(data).then(res => {
					if (res.code == "success") {
						that.cardTab = true;
						that.model1.userInfo = {};
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
					} else {
						that.cardTab = false;
					}
				})
			},
			forgotPassword() {
				console.log(9999)
				this.forgotpwFlag = true;
			},
			cardArrsClick() {
				this.forgotpwFlag = false;
				this.cardTab = !this.cardTab;
			},
			cardArrsClick1() {
				this.forgotpwFlag = false;
				this.cardTab = true;
			},
			// 滑动开始
			playerTouchStart(ev) {
				ev = ev || event
				this.isClick = true
				// tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
				if (ev.touches.length === 1) {
					// 记录开始位置
					this.startY = ev.touches[0].clientY
					console.log('开始触摸-startY', this.startY)
				}
			},
			// 滑动中
			playerTouchMove(ev) {
				ev = ev || event
				this.isClick = false
				if (ev.touches.length === 1) {
					// 滑动时距离浏览器左侧实时距离
					this.moveY = ev.touches[0].clientY
					// 起始位置减去实时的滑动的距离,得到手指实时偏移距离
					this.disY = this.startY - this.moveY
					console.log('滑动-disY', this.disY)
					// 判断滑动方向
					if (this.disY < 0) {
						// 向下滑
						this.slideDirection = 0
						// 当前上一个变化
						if (this.cardArrs[this.currentIndex - 1]) {
							let item_0 = this.cardArrs[this.currentIndex - 1]
							item_0.translateY = -window.innerHeight - this.disY + 'px'
							item_0.transitionTime = 0
							if (-this.disY <= this.slideFilishDistance) {
								item_0.scale = -(0.2 / this.slideFilishDistance) * this.disY + 0.8
							}
						}
						// 当前第一个变化
						let item_1 = this.cardArrs[this.currentIndex]
						if (-this.disY <= this.slideFilishDistance) {
							item_1.translateY = -(9 / this.slideFilishDistance) * this.disY + 'vh'
							item_1.transitionTime = 0
							item_1.scale = (0.1 / this.slideFilishDistance) * this.disY + 1
						}
						// 当前第二个变化
						if (this.cardArrs[this.currentIndex + 1]) {
							let item_2 = this.cardArrs[this.currentIndex + 1]
							if (-this.disY <= this.slideFilishDistance) {
								item_2.translateY = -(5 / this.slideFilishDistance) * this.disY + 9 + 'vh'
								item_2.transitionTime = 0
								item_2.scale = (0.05 / this.slideFilishDistance) * this.disY + 0.9
							}
						}
						// 当前第三个变化
						if (this.cardArrs[this.currentIndex + 2]) {
							let item_3 = this.cardArrs[this.currentIndex + 2]
							if (-this.disY <= this.slideFilishDistance) {
								item_3.translateY = -(26 / this.slideFilishDistance) * this.disY + 14 + 'vh'
								item_3.transitionTime = 0
								item_3.scale = (0.35 / this.slideFilishDistance) * this.disY + 0.85
							}
						}

					} else if (this.disY > 0) {
						// 向上滑
						this.slideDirection = 1
						// 当前第一个变化
						let item_1 = this.cardArrs[this.currentIndex]
						item_1.translateY = -this.disY + 'px'
						item_1.transitionTime = 0
						item_1.scale = 1
						// 当前第二个变化
						if (this.cardArrs[this.currentIndex + 1]) {
							let item_2 = this.cardArrs[this.currentIndex + 1]
							if (this.disY <= this.slideFilishDistance) {
								item_2.translateY = -(9 / this.slideFilishDistance) * this.disY + 9 + 'vh'
								item_2.transitionTime = 0
								item_2.scale = (0.1 / this.slideFilishDistance) * this.disY + 0.9
							}
						}
						// 当前第三个变化
						if (this.cardArrs[this.currentIndex + 2]) {
							let item_3 = this.cardArrs[this.currentIndex + 2]
							if (this.disY <= this.slideFilishDistance) {
								item_3.translateY = -(5 / this.slideFilishDistance) * this.disY + 14 + 'vh'
								item_3.transitionTime = 0
								item_3.scale = (0.05 / this.slideFilishDistance) * this.disY + 0.85
							}
						}
						// 当前第四个变化
						if (this.cardArrs[this.currentIndex + 3]) {
							let item_4 = this.cardArrs[this.currentIndex + 3]
							if (this.disY <= this.slideFilishDistance) {
								item_4.translateY = -(26 / this.slideFilishDistance) * this.disY + 40 + 'vh'
								item_4.transitionTime = 0
								item_4.scale = (0.35 / this.slideFilishDistance) * this.disY + 0.5
							}
						}
					}
				}
			},
			// 滑动结束
			playerTouchEnd(ev) {
				ev = ev || event
				if (ev.changedTouches.length === 1) {
					this.endY = ev.changedTouches[0].clientY
					console.log('滑动结束-endY', this.endY)
					this.disY = this.startY - this.endY
					if (Math.abs(this.disY) < this.slideDistance) {
						// 滑动距离小于滑动限制的距离,强行回到起点
						this.returnBack()
					} else {
						// 滑动距离大于滑动限制的距离,滑动到最大值
						if (this.slideDirection === 1) {
							this.slideUp()
						} else {
							this.slideDown()
						}
					}
				}
			},
			// 回到起点
			returnBack() {
				// 当前第一个变化
				let item_1 = this.cardArrs[this.currentIndex]
				item_1.translateY = 0
				item_1.transitionTime = 1
				item_1.scale = 1
				// 当前第二个变化
				if (this.cardArrs[this.currentIndex + 1]) {
					let item_2 = this.cardArrs[this.currentIndex + 1]
					item_2.translateY = '9vh'
					item_2.transitionTime = 1
					item_2.scale = 0.9
				}
				// 当前第三个变化
				if (this.cardArrs[this.currentIndex + 2]) {
					let item_3 = this.cardArrs[this.currentIndex + 2]
					item_3.translateY = '14vh'
					item_3.transitionTime = 1
					item_3.scale = 0.85
				}
				// 当前第四个变化
				if (this.cardArrs[this.currentIndex + 3]) {
					let item_4 = this.cardArrs[this.currentIndex + 3]
					item_4.translateY = '40vh'
					item_4.transitionTime = 1
					item_4.scale = 0.5
				}
			},
			// 向上滑动切换
			slideUp() {
				if (this.currentIndex === this.cardArrs.length - 1) {
					return this.returnBack()
				}
				// 当前第一个变化
				let item_1 = this.cardArrs[this.currentIndex]
				item_1.translateY = '-160vh'
				item_1.transitionTime = 1
				item_1.scale = 0.5
				// 当前第二个变化
				if (this.cardArrs[this.currentIndex + 1]) {
					let item_2 = this.cardArrs[this.currentIndex + 1]
					item_2.translateY = 0
					item_2.transitionTime = 1
					item_2.scale = 1
				}
				// 当前第三个变化
				if (this.cardArrs[this.currentIndex + 2]) {
					let item_3 = this.cardArrs[this.currentIndex + 2]
					item_3.translateY = '9vh'
					item_3.transitionTime = 1
					item_3.scale = 0.9
				}
				// 当前第四个变化
				if (this.cardArrs[this.currentIndex + 3]) {
					let item_4 = this.cardArrs[this.currentIndex + 3]
					item_4.translateY = '14vh'
					item_4.transitionTime = 1
					item_4.scale = 0.85
				}
				this.currentIndex++
				if (this.currentIndex > this.cardArrs.length - 1) {
					this.currentIndex = this.cardArrs.length - 1
				}
				console.log('currentIndex---', this.currentIndex)
			},
			// 向下滑动切换
			slideDown() {
				if (this.currentIndex === 0) {
					return this.returnBack()
				}
				// 当前上一个变化
				if (this.cardArrs[this.currentIndex - 1]) {
					let item_0 = this.cardArrs[this.currentIndex - 1]
					item_0.translateY = 0
					item_0.transitionTime = 0.6
					item_0.scale = 1
				}
				// 当前第一个变化
				let item_1 = this.cardArrs[this.currentIndex]
				item_1.translateY = '9vh'
				item_1.transitionTime = 0.6
				item_1.scale = 0.9
				// 当前第二个变化
				if (this.cardArrs[this.currentIndex + 1]) {
					let item_2 = this.cardArrs[this.currentIndex + 1]
					item_2.translateY = '14vh'
					item_2.transitionTime = 0.6
					item_2.scale = 0.85
				}
				// 当前第三个变化
				if (this.cardArrs[this.currentIndex + 2]) {
					let item_3 = this.cardArrs[this.currentIndex + 2]
					item_3.translateY = '40vh'
					item_3.transitionTime = 0.6
					item_3.scale = 0.5
				}
				this.currentIndex--
				if (this.currentIndex < 0) {
					this.currentIndex = 0
				}
				console.log('currentIndex---', this.currentIndex)
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.card-wrapper {
		margin-top: -150%;
		// position: relative;
		// height: calc(65vh + 11px);
	}

	.card-item {
		position: absolute;
		width: 100%;
		// height: 9rem;
		// text-align: center;
		font-size: 18px;
		border-radius: 5px;
		will-change: transform;

		.item-inner {
			width: 90vw;
			// height: 100%;
			margin: 0 auto;
			box-shadow: 0 4px 12px 1px rgba(57, 57, 57, .14);
			position: relative;
			border-radius: 12px;
		}
	}

	@import 'assets/style/index.rpx.less';
</style>
